<template>
  <div id="lotteryDetail">
    <el-row type="flex" justiify="center">
      <el-col :span="12" :offset="0">
        <h1 class="con-right-title">
          {{ activityName }}
        </h1>
      </el-col>
    </el-row>
    <div class="detail-wrap">
      <el-row>
        <el-col :span="24">
          <el-form
            label-width="120px"
            :model="ruleForm"
            label-position="left"
            :rules="rules"
          >
            <el-form-item label="活动时间：">
              {{ activityTime }}
            </el-form-item>
            <el-form-item label="免费抽奖规则：">
              {{ topDetails.freeLotteryRules }}
            </el-form-item>
            <el-form-item label="付费抽奖规则：">
              {{ topDetails.paidLotteryRules }}
            </el-form-item>
            <el-form-item label="奖品明细：">
              {{ topDetails.prizeDetails }}
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="24">
          <el-tabs
            v-model="activeName"
            type="border-card"
            @tab-click="handleClick"
          >
            <el-tab-pane label="活动概况" name="survey">
              <activityProfile></activityProfile>
            </el-tab-pane>
            <el-tab-pane label="抽奖明细" name="detailed">
              <awardDetails></awardDetails>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { lotteryActiveDetail } from '@/api/activeList/index'
import activityProfile from '@component/markingActive/common/activityProfile'
import awardDetails from '@component/markingActive/common/awardDetails'

export default {
  name: 'lottery',
  data() {
    return {
      id: '',
      activityName: '',
      topDetails: {},
      ruleForm: {},
      rules: {},
      activeName: 'survey'
    }
  },
  components: {
    activityProfile,
    awardDetails
  },
  created() {
    this.activityName = this.$route.query.name
    this.activityTime = this.$route.query.time
    this.id = this.$route.query.id
  },
  mounted() {
    lotteryActiveDetail(
      this.id,
      {},
      (res) => {
        this.topDetails = res
      },
      (err) => {}
    )
  },
  methods: {
    goDetail() {
      this.$router.push({
        name: 'wh:lotteryDetails'
      })
    },
    handleClick(val) {
      this.activeName = val.name
    }
  }
}
</script>

<style lang="less">
.detail-wrap {
  padding: 0 24px 24px;
}
#lotteryDetail {
  .el-row {
    padding-top: 15px;
  }
  .el-tab-pane {
    padding-top: 15px;
  }
  .el-tabs--card > .el-tabs__header .el-tabs__nav {
    margin-left: 30px !important;
  }
  .el-tabs__item.is-active {
    height: 41px;
    color: #0d1636 !important;
    border-top: 2px solid #1dc8a4;
  }
  .el-tabs__item:hover {
    color: #1dc8a4 !important;
  }
  .el-form-item__content {
    .el-input__inner {
      height: 30px;
      line-height: 30px;
    }
    @import url('~@common/style/textarea.less');
  }
}
</style>
